<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font: 14px/22px '宋体', arial, serif;
        }

        .navBar {
            margin-top: 80px;
            width: 100%;
            height: 38px;
            background: #333333;
        }

        .nav {
            margin: 0 auto;
            border: 0px solid #ccc;
        }
        .nav ul {
            list-style: none;
            width: auto;
        }
        .nav ul li {
            height: 38px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            font-size: 16px;
            color: #ffffff;
            text-decoration: none;
            line-height: 39px;
        }

        /*宽度大于1000px的屏幕*/
        @media all and (min-width: 1000px){
            .nav {
                width: 1000px;
                height: 38px;
            }
            .nav ul li{
                float: left;
                width: auto;
            }
            .nav ul li a{
                padding: 0 30px;
            }
            .nav ul li.active{
                background-color: #ff6600;
            }
            .nav ul li:hover a{
                color: #ff6600;
            }
            .nav ul li.active:hover a{
                color: #fff;
            }

            .navBar .title{
                display: none;
            }
        }

        @media screen and (min-width: 640px) and (max-width: 1000px){
             .nav {
                 width: auto;
                 height: 38px;
             }
            .nav li{
                float: left;
                width: 14%;
            }
            .nav ul li.active {
                background-color: #ff6600;
            }
            .nav ul li:hover a{
                color: #ff6600;
            }
            .nav ul li.active:hover a{
                color: #ffffff;
            }
            .navBar .title {
                display: none;
            }
        }

        @media screen and (max-width: 640px){
            .navBar{
                margin-top: 0;
                height:auto;
                background-color: #444;
                position: relative;
            }
            .nav{
                width:100%;
                position: fixed;
                top: 38px;
                margin-top: -555px;
                z-index: 1;
            }
            .nav ul li{
                top: 1px;
                width: 100%;
                background-color: #333333;
            }
            .nav ul li a:active{
                background-color: #ff6600;
            }
            
            .navBar .title{
                position: relative;
                z-index: 999;
            }
            .navBar .logo{
                display: block;
                text-align: center;
                line-height: 38px;
                font-size: 16px;
                height: 38px;
                color: #ffffff;
                background-color: #ff6600;
                z-index: 2;
            }
            .navBar .title .btn{
                position: absolute;
                top: 0;
                right: 10px;
                width: 34px;
                height: 34px;
                padding: 2px;
                background: url("btn.png") 0 0 no-repeat;
                cursor: pointer;
            }
        }

    </style>
</head>
<body>
    <div class="navBar">
        <div class="title">
            <a href="#" class="logo">Logo</a>
            <span class="btn"></span>
        </div>
        <div class="nav">
            <ul id="menu">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">电视剧</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">纪录片</a></li>
                <li><a href="#">公开课</a></li>
            </ul>
        </div>
    </div>
    fdsjlfjdfisofjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
    <script>
        var $$ = function (selector) {
            return document.querySelector(selector);
        };

        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
        };

//        var show = function (obj) {
//            var timer;
//            clearInterval(timer);

//            timer = setInterval(function () {
//                var marginTop = parseInt(getCss(obj, 'marginTop'));
//                var speed = -(marginTop) / 3;
//                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//                if (Math.abs(marginTop) < 5) {
//                    clearInterval(timer);
//                    obj.style.marginTop = 0 + "px";
//
//                } else {
//                    obj.style.marginTop = marginTop + speed + "px";
//                }
//            }, 30);
//
//        };
//
//        var toggle = function (menuId, btnId) {
//            var nav = $$(menuId);
//            var btn = $$(btnId);
//            var flag = false;
//            btn.addEventListener('touchend', function () {
//                if(!flag){
//                    show(nav);
//                }else{
//                    nav.style.marginTop = "-500px";
//                }
//                flag = !flag;
//            })
//        };

            var move = function (obj, target) {
                var timer;
                clearInterval(timer);
                timer = setInterval(function () {
                    var speed = (target - obj.offsetTop)/3;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (Math.abs(obj.offsetTop - target) < 4) {
                        clearInterval(timer);
                        obj.style.marginTop = target + "px";
                    } else {
                        obj.style.marginTop = obj.offsetTop + speed + "px";
                    }
                }, 30);

            }

            var toggle = function (menuId, btnId) {
                var menu = $$(menuId);
                var btn = $$(btnId);
                var countNum = 0;
                var menuHeight = menu.offsetHeight;
                menu.style.marginTop = - menuHeight + "px";
                btn.onclick = function () {
                    if (countNum === 0) {
                        move(menu, 0);
                        countNum = 1;
                    } else {
                        move(menu, -500);
                        countNum = 0;
                    }
                }
            }

        window.onload = function () {
            toggle(".nav", '.btn')
        }
    </script>
</body>
</html>